<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
  <div id="app"></div>

  <script>
    const data = {
      name: "张三",
      age: 18
    }
    const response = observe(data, res => {
      document.querySelector('#app').innerHTML = `名字:${res.name},年龄${res.age}`
    });
    document.querySelector('input').oninput=function(){
      console.log('t')
      response.age = this.value
    }
    function observe(data, handle) {
      let target = {};
      for (let key in data) {
        Object.defineProperty(target, key, {
          get() {
            return data[key];
          },
          set(val) {
            data[key] = val;
            // 数据修改以后渲染页面
            handle(target)
          }
        })
      }
      handle(target) // 渲染页面
      return target;// 返回一个监听对象，以便于对监听的属性进行操作
     
    }
  </script>
</body>

</html>